import React from "react";
import {Button, Card, Col, Form, Input, Row} from 'antd';

import BaseComponent from "../../redare/components/BaseComponent";
import {WebPage} from "../../redare_components/webplatform_workbench/utils/WorkbenchDecoratorUtil";
import CommonPageHeader from "../../components/common/CommonPageHeader";
import RoleSelect from "../../redare_components/webplatform_workbench/components/role/RoleSelect";
import UserAddFormModal from "../../components/setting/user/UserAddFormModal";
import UserManagementGrid from "../../components/setting/user/UserManagementGrid";

const routes = [
    {
        path: '/',
        breadcrumbName: '工作台',
    },
    {
        path: '/setting/user/manager',
        breadcrumbName: '人员管理',
    },
];


export default @WebPage({
    id: 'com.redare.devframework.webplatform.pages.setting.UserManagementPage',
    classify: '用户管理',
    name: '系统设置',
    webPath: '/setting/user/manager',
    webFunIds: [
        "addUser",
        "editUser",
        "disableOrEnableUser",
        "updateUserPwd",
        "delUser",
        "updateUserRole",
    ]
})

class UserManagementPage extends BaseComponent {

    formRef = React.createRef();

    constructor(props) {
        super(props);
    }

    addNewUser() {
        if (this.addForm) {
            this.addForm._show()
        }
    }

    query() {
        this.formRef.current.validateFields()
            .then(values => {
                this.search(values)
            })
    }

    search(values) {
        if (this.userGrid) {
            this.userGrid.findUserPage(values, 1)
        }
    }

    reset() {
        this.formRef.current.resetFields()
    }

    render() {
        return (
            <div className="UserManagement-Page">
                <CommonPageHeader
                    className="bg-white"
                    routes={routes}
                />
                <Card bordered={false} className="margin24">
                    <Form className="training-form marginBot24" ref={this.formRef}>
                        <Row gutter={24} justify="space-between">
                            <Col xl={20} lg={24}>
                                <Row gutter={24}>
                                    <Col xl={8} lg={12}>
                                        <Form.Item label="关键字" name="key">
                                            <Input placeholder="请输入" autoComplete="off"/>
                                        </Form.Item>
                                    </Col>
                                    <Col xl={8} lg={12}>
                                        <Form.Item label="角色名称" name="roleIds">
                                            <RoleSelect platform={"root"}
                                                        onValueChange={this._onRoleValueChange.bind(this)}/>
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </Col>
                            <Col>
                                <Row gutter={24}>
                                    <Col><Button type="primary" onClick={() => this.query()}>查询</Button></Col>
                                    <Col><Button onClick={() => this.reset()}>重置</Button></Col>
                                    <Col><Button type="primary" onClick={() => this.addNewUser()}>新增</Button></Col>
                                </Row>
                            </Col>
                        </Row>
                    </Form>
                    <UserManagementGrid ref={(o) => this.userGrid = o}/>
                </Card>
                <UserAddFormModal ref={(o) => this.addForm = o} refresh={() => this.search()}/>
            </div>
        )
    }

    _onRoleValueChange(value) {
        this.formRef.current.setFieldsValue({roleIds: value})
    }

}